<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>物理网格管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="common-layout" style="margin-top: 15px;">
        <el-container>
            <!-- 地区 -->
            <el-aside width="245px" style="border: 1px solid; margin-top: 15px;">

                <el-input v-model="filterText" style="width: 240px" placeholder="请输入区域名称关键字" />

                <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data" :props="defaultProps"
                    @node-click="nodeClick" default-expand-all :filter-node-method="filterNode" />
            </el-aside>


            <el-main>
                <!-- 搜索区域 -->
                <div id="search" style="border: 1px solid; padding: 12px; width:100%;">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="网格名称">
                            <el-input v-model="searchForm.GridName" placeholder="请输入网格名称" clearable />
                        </el-form-item>

                        <br>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                    </el-form>

                </div>

                <!-- 表格区域 -->
                <div style="padding: 10px;">
                    <el-button type="success" @click="toAdd()">新增</el-button>

                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column fixed prop="id" label="遍号" width="150" />
                        <el-table-column prop="gridNo" label="网格编号" width="120" />
                        <el-table-column prop="gridName" label="物理网格名称" width="120" />
                        <el-table-column prop="areaId" label="区域名称" width="120" />
                        <el-table-column fixed="right" label="操作" min-width="120">
                            <template v-slot="scope">
                                <el-button link type="danger" size="small" @click="del(scope.row)">
                                    删除
                                </el-button>
                                <el-button link type="primary" size="small" @click="toEdit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <el-dialog v-model="form.isOpen" :title="'添加' + nodeValue + '的物理网格'">

                    <el-form ref="formRef" :inline="false" x:model="form" class="demo-form-inline">
                        <el-form-item label="所属区域" prop="areaId">
                            <el-input v-model="form.areaId" disabled />
                        </el-form-item>
                        <el-form-item label="网格编码" prop="gridNo">
                            <el-input v-model="form.gridNo" clearable />
                        </el-form-item>

                        <el-form-item label="网格名称" prop="gridName">
                            <el-input v-model="form.gridName" clearable />
                        </el-form-item>


                        <br>
                        <el-form-item>
                            <el-button type="primary" @click="save()">保存</el-button>
                            <el-button type="primary" @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-form>


                </el-dialog>


            </el-main>
        </el-container>
    </div>

</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, ElTree, type FormInstance } from 'element-plus'
import axios from 'axios';



const ruleFormRef = ref<FormInstance>() //表单本身

const formRef = ref(null);
const resetForm = () => {

};
const save = () => {//
    if (form.isAdd) {//新增


        axios.post('https://localhost:7171/api/PhysicalGrid/CreatePhysicalGrid', form).then(res => {

            if (res.data.code == 200) {
                ElMessage.success(res.data.msg);
                form.isOpen = false;
                getData();
            } else {
                ElMessage.error(res.data.msg);
            }
        });
    } else {//编辑
        axios.put('https://localhost:7171/api/PhysicalGrid/UpdatePhysicalGrid', form).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg);
                form.isOpen = false;
                getData();
            } else {
                ElMessage.error(res.data.msg);
            }
        });
    }

}
const toEdit = (row: any) => {
    //修改
    form.isOpen = true;
    form.isAdd = false;
    form.areaId = row.areaId
    form.gridName = row.gridName
    form.gridNo = row.gridNo
    form.id = row.id

}

const toAdd = () => {//添加
    formRef.value.resetFields();
    if (nodeValue.value == -1) {
        ElMessageBox.alert("请先在左侧选择区域");
        return;
    }

    form.isOpen = true;
    form.areaId = nodeKey;
    form.isAdd = true;
}

const del = (row: any) => {
    ElMessageBox.confirm('您确认删除吗?', '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put('https://localhost:7171/api/PhysicalGrid/DelPhysicalGrid', row).then((res) => {

                if (res.data.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                    getData()
                } else {
                    ElMessage({
                        type: 'error',
                        message: res.data.msg,
                    })

                }
            });


        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您取消了删除',
            })
        })

}

const form = reactive({
    isAdd: true,
    isOpen: false,
    id: 0,
    "areaId": null,
    "gridNo": "",
    "gridName": ""
});


//查询的参数
const searchForm = reactive({
    GridName: '',
    AreaName: ''
})

const tableData = ref([])

const getData = () => {
    axios.get('https://localhost:7077/api/PhysicalGrid/GetGridList', { params: searchForm }).then(res => {
        console.log(res.data.data)
        tableData.value = res.data.data
    });
}



interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
//区域树选中的id    
const nodeKey = ref()
//区域树选中的区域名称
const nodeValue = ref(-1)
const defaultProps = {
    children: 'children',
    label: 'areaName',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}

const data = ref([]);//data从接口里调用区域的树形数据源

const getTree = () => {
    axios.get("https://localhost:7016/api/Area/GetAreaTree").then(res => {
        console.log(res) //实事求是
        data.value = res.data.data
    });
}
//第一个参数式节点对象 第二个:节点类型
const nodeClick = (nodeObj: any, nodetype: any, TreeNode: any, event: any) => {
    // console.log(nodeObj);
    // console.log(nodetype);
    // console.log(TreeNode);
    // console.log(event);
    nodeKey.value = nodeObj.id
    nodeValue.value = nodeObj.areaName
}

onMounted(() => {
    getTree();
    getData();
})
</script>